import React, { useState } from 'react'
import { Space, Table, Pagination, Button, Input, Select, Modal, Upload, Image, Row } from 'antd';
import uplodImg from "../../../icon/上传.png"
import exportImg from "../../../icon/导出.png"
import {
  PlusOutlined
} from '@ant-design/icons';
const getRowClassName = (record, index) => {
  let className = '';
  className = index % 2 === 0 ? "oddRow" : "evenRow";
  return className
}

const columns = [
  {
    title: '文件名称',
    dataIndex: 'fileName',
    key: 'fileName',
    align: "center",
    width: "12%",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '地市',
    dataIndex: 'city',
    key: 'city',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '发起人员',
    dataIndex: 'promoter',
    key: 'promoter',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '发起时间',
    dataIndex: 'promoterTime',
    key: 'promoterTime',
    align: "center",
    width: "12%",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '状态',
    dataIndex: 'state',
    key: 'state',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '设备数量',
    dataIndex: 'deviceNum',
    key: 'deviceNum',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '验收通过数',
    dataIndex: 'checkSucNum',
    key: 'checkSucNum',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '验收异常数',
    dataIndex: 'checkAbnNum',
    key: 'checkAbnNum',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '验收人',
    dataIndex: 'checkName',
    key: 'checkName',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '验收日期',
    dataIndex: 'checkTime',
    key: 'checkTime',
    align: "center",
    width: "12%",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
    fixed: 'right',
    align: "center",
    width: "12%",
    render: (text, item) => {
      return <Space>
        <a style={{ fontSize: "12px" }} >验收</a>
        <a style={{ fontSize: "12px" }} >验收记录</a>
      </Space>
    }
  },
];
const data = [
  {
    key: '1',
    fileName: '设备安装导入.xlsx ',
    city: "福州市",
    promoter: '张三',
    promoterTime: "2023-03-29 09:59:51",
    state: "处理完成",
    deviceNum: "1",
    checkSucNum: "1",
    checkAbnNum: "0",
    checkName: "张三",
    checkTime: "2023-03-29 09:59:59",
  },
  {
    key: '2',
    fileName: '设备安装导入.xlsx ',
    city: "福州市",
    promoter: '张三',
    promoterTime: "2023-03-29 09:59:51",
    state: "处理完成",
    deviceNum: "1",
    checkSucNum: "1",
    checkAbnNum: "0",
    checkName: "张三",
    checkTime: "2023-03-29 09:59:59",
  },
  {
    key: '3',
    fileName: '设备安装导入.xlsx ',
    city: "福州市",
    promoter: '张三',
    promoterTime: "2023-03-29 09:59:51",
    state: "处理完成",
    deviceNum: "1",
    checkSucNum: "1",
    checkAbnNum: "0",
    checkName: "张三",
    checkTime: "2023-03-29 09:59:59",
  },
  {
    key: '4',
    fileName: '设备安装导入.xlsx ',
    city: "福州市",
    promoter: '张三',
    promoterTime: "2023-03-29 09:59:51",
    state: "处理完成",
    deviceNum: "1",
    checkSucNum: "1",
    checkAbnNum: "0",
    checkName: "张三",
    checkTime: "2023-03-29 09:59:59",
  },
  {
    key: '5',
    fileName: '设备安装导入.xlsx ',
    city: "福州市",
    promoter: '张三',
    promoterTime: "2023-03-29 09:59:51",
    state: "处理完成",
    deviceNum: "1",
    checkSucNum: "1",
    checkAbnNum: "0",
    checkName: "张三",
    checkTime: "2023-03-29 09:59:59",
  },
  {
    key: '6',
    fileName: '设备安装导入.xlsx ',
    city: "福州市",
    promoter: '张三',
    promoterTime: "2023-03-29 09:59:51",
    state: "处理完成",
    deviceNum: "1",
    checkSucNum: "1",
    checkAbnNum: "0",
    checkName: "张三",
    checkTime: "2023-03-29 09:59:59",
  },
  {
    key: '7',
    fileName: '设备安装导入.xlsx ',
    city: "福州市",
    promoter: '张三',
    promoterTime: "2023-03-29 09:59:51",
    state: "处理完成",
    deviceNum: "1",
    checkSucNum: "1",
    checkAbnNum: "0",
    checkName: "张三",
    checkTime: "2023-03-29 09:59:59",
  },
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};
export default function ToBeCheck(props) {
  const [fileList, setFileList] = useState([]);
  const [selectionType, setSelectionType] = useState('checkbox');
  return (
    <div>
      <Space size={35} style={{ padding: "10px 20px 0 20px" }}>
        <div>
          文件名称<Input placeholder="请输入" className='inputValue' />
        </div>
        <div>
          发起人员<Input placeholder="请输入" className='inputValue' />
        </div>
        <div>
          地市
          <Select
            placeholder="请选择"
            className='inputValue'
            dropdownStyle={{ fontSize: "7px" }}
            options={[
              {
                value: '福州市',
                label: '福州市',
              },
              {
                value: '1',
                label: '1',
              },
              {
                value: '2',
                label: '2',
              },
            ]}
          />
        </div>
        <div>
          区县<Select
            defaultValue="全部"
            className='inputValue'
            options={[
              {
                value: '全部',
                label: '全部',
              },
            ]}
          />
        </div>


      </Space>
      <Space size={10} style={{ float: "right", padding: "10px 0 0 0" }}>
        <Button style={{ color: "white", background: "#1FBBA9", fontSize: "12px", borderRadius: "4px" }}>查询</Button>
        <Button style={{ color: "black", fontSize: "12px", borderRadius: "4px" }}>重置</Button>
        <Button style={{ color: "black", fontSize: "12px", borderRadius: "4px" }}>导出</Button>

      </Space>

      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        rowClassName={(record, index) => getRowClassName(record, index)}
        columns={columns} dataSource={data} style={{ border: "1px solid #c9cacac7", margin: "15px 0 0 0", }}
        pagination={false}
        size='small'
      >
      </Table>
      <Pagination
        total={100}
        showTotal={(total) => `共 ${total} 条记录 第1~${total > 9 ? 10 : total} 条`}
        defaultCurrent={1}
        showSizeChanger={false}
        style={{ margin: "10px 0 0 0", fontSize: "12px" }}
      />

    </div>
  )
}
